<template>
  <div class="contentbox flex-col">
    <el-card class="card-margin flex-col">
      <el-descriptions
        title="报警查询"
        size="medium"
        :column="1"
        :colon="false"
      >
        <el-descriptions-item>
          <div class="taskview-top">
            <span>工厂：</span>
            <el-select placeholder="请选择" multiple v-model="flterValueLine">
              <el-option
                v-for="item in optionsflterValueLine"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>工序：</span>
            <el-select
              placeholder="请选择"
              multiple
              v-model="flterValueProcess"
            >
              <el-option
                v-for="item in optionsflterValueProcess"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>设备：</span>
            <el-autocomplete
              class="inline-input"
              v-model="flterValueDevice"
              :fetch-suggestions="querySearch"
              placeholder="请输入检索"
            ></el-autocomplete>
            <span>设备分类：</span>
            <el-select placeholder="请选择" multiple v-model="flterValueKind">
              <el-option
                v-for="item in optionflterValueKind"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>设备状态：</span>
            <el-select placeholder="请选择" multiple v-model="flterValueState">
              <el-option
                v-for="item in optionflterValueState"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>离线开始时间：</span>
            <el-date-picker
              v-model="startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <span>~ </span>
            <el-date-picker
              v-model="endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
            <el-button type="primary" @click="searchTableData">搜索</el-button>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <div class="flex-col">
        <el-table
          border
          :data="tableData"
          tooltip-effect="dark"
          height="100%"
          v-loading="loading"
          @sort-change="handleSort"
        >
          <el-table-column :index="table_index" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="Line" label="工厂"> </el-table-column>
          <el-table-column prop="Process" label="工序"> </el-table-column>
          <el-table-column prop="Device" label="设备"> </el-table-column>
          <el-table-column prop="Kind" label="设备分类"> </el-table-column>
          <el-table-column
            prop="OfflineTime"
            label="离线时间"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column prop="OnlineTime" label="上线时间" sortable="custom">
          </el-table-column>
          <el-table-column
            prop="OfflineTimeLength"
            label="离线时长(分钟)"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column prop="State" label="设备状态"> </el-table-column>
          <el-table-column
            prop="PushTimes"
            label="推送次数(次)"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column prop="PingState" label="Ping状态"> </el-table-column>
          <el-table-column prop="TelnetState" label="Telnet状态">
          </el-table-column>
        </el-table>
        <div class="pagination-wrapper">
          <el-pagination
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="20"
            layout="total,prev, pager, next,sizes, jumper"
            :total="totalTableDataSum"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import $http from "../../../utils/apiHelper";
export default {
  components: {},
  props: {},
  mounted() {},
  data() {
    const today = new Date();
    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
    const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
// 格式化日期的函数
    const format = (date) =>
      `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date
        .getDate()
        .toString()
        .padStart(2, "0")} 00:00:00`;

    return {
      loading: false,//加载圈圈的状态
      startTime: format(thirtyDaysAgo),// 起始时间，默认为30天前
      endTime: format(tomorrow), // 结束时间，默认为明天
      flterValueLine: [],// 工厂过滤值
      flterValueProcess: [],// 工序过滤值
      flterValueDevice: "",// 设备过滤值
      flterValueKind: [],// 设备类别过滤值
      flterValueState: [],// 设备状态过滤值
      sortMethod: "descending",// 排序方法，默认为降序
      sortFieldName: "OffLineTime",// 排序字段，默认为离线时间
      tableData: [],// 表格数据
      currentPage: 1, // 当前页码，默认为第一页
      pageSize: 20,// 每页显示条数，默认为20条
      totalTableDataSum: 0,// 表格数据总数
      optionsflterValueLine: [],// 工厂过滤选项
      optionsflterValueProcess: [],// 工序过滤选项
      optionsflterValueDevice: [],// 设备过滤选项
      optionflterValueKind: [
        {
          value: 0,
          label: "在线设备",
        },
        {
          value: 1,
          label: "离线设备",
        },
        {
          value: 2,
          label: "监测设备",
        },
      ],// 设备类别过滤选项
      optionflterValueState: [
        {
          value: 0,
          label: "已上线",
        },
        {
          value: 1,
          label: "离线中",
        },
      ],// 设备状态过滤选项
    };
  },
  watch: {},
  computed: {},
  methods: {
    table_index(index){
        return (this.currentPage-1) * this.pageSize + index + 1
    },

    ///pagination
    handlePageSizeChange(val) {
      this.pageSize = val;
      //console.log(`每页 ${this.pageSize} 条`);
      this.searchTableData();
    },
    handleCurrentPageChange(val) {
      this.currentPage = val;
      //console.log(`当前页: ${this.CurrentPage}`);
      this.searchTableData();
    },
    ///pagination

    ///查询表数据
    searchTableData() {
      try {
        this.loading = true;
        let data = {
          PageSize: this.pageSize,
          CurrentPage: this.currentPage,
          LineList: this.flterValueLine,
          ProcessList: this.flterValueProcess,
          Equip: this.flterValueDevice,
          EquipCategoryList: this.flterValueKind,
          EquipStateList: this.flterValueState,
          StartTime: this.startTime,
          EndTime: this.endTime,
          SortMethod: this.sortMethod,
          SortFieldName: this.sortFieldName,
        };
        $http({
          method: "post",
          url: "/AlarmQueryPage/GetAlarmQueryList",
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          data: data,
        }).then((result) => {
          if (result.Status === 200) {
            this.totalTableDataSum = result.Data.Total;
            this.tableData = [...result.Data.List];
            //console.log(this.tableData);
            this.loading = false;
            return;
          }
          this.$message(result.Message);
          //this.LoadEARuleFuncList = result.data.Content;
        });
      } catch (err) {
        this.$message(err);
      }
    },
    ///查询表数据

    ///设备模糊检索
    querySearch(queryString, cb) {
      var devices = this.optionsflterValueDevice;
      // 根据输入的查询字符串过滤设备列表
      var results = queryString
        ? devices.filter(this.createFilter(queryString))
        : devices;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      // 创建用于过滤设备的函数
      return (devices) => {
        return (
          // 将设备的值转换为小写，并检查查询字符串是否匹配设备值的开头
          devices.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    ///设备模糊检索

    ///查询所有过滤条件
    loadAllOptions() {
      try {
        $http({
          method: "get",
          url: "/AlarmQueryPage/GetAlarmQuerySearchInfo",
          headers: {
            "Content-Type": "application/json;charset=UTF-8",
          },
        }).then((result) => {
          if (result.Status === 200) {
            this.optionsflterValueLine = result.Data[0].Option;
            this.optionsflterValueProcess = result.Data[1].Option;
            this.optionsflterValueDevice = result.Data[2].Option;
            return;
          }
          this.$message.error(result.Message);
          //this.LoadEARuleFuncList = result.data.Content;
        });
      } catch (err) {
        this.$message.error(err);
      }
    },
    ///查询所有过滤条件

    ///排序
    handleSort(sort) {
      if (sort) {
        const map = {
          offlineTime: "OffLineTime",
          onlineTime: "OnLineTime",
          offlineTimeLength: "OffLineDuration",
          pushTimes: "PushTime",
        };

        this.sortFieldName = map[sort.prop] || "";
        this.sortMethod = sort.order || "";
      }
      this.tableData = [];
      this.searchTableData();
      // 发送排序请求到后端
      // 接收排序数据并更新tableData
    },
    ///排序
  },
  created() {
    this.loadAllOptions();
    this.searchTableData();
  },
};
</script>


<style  scoped>
.pagination-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 20px;
}

.el-table__header {
  background-color: #f5f7fa;
}
/* @import url(); 引入css类 */
</style>
  